<template>
	<view>
		<myHeader :title="title"></myHeader>
		<view class="content">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button">
			</uni-segmented-control>
			<view class="">
				<view v-show="current === 0">
					<!-- list -->
					<scroll-view :scroll-y="true" :enable-back-to-top="true" class="scroll-Y" :refresher-enabled="true"
						@scrolltolower="refesh" style="height:90%;">
						<uni-list class="userContent">
							<uni-list-item v-for="(item,index) in userList" :title="item.realName" :note="item.phone"
								:thumb="item.img" thumb-size="lg" rightText="" @click="gotoUserRoles(item)"
								:clickable="true" link>
								<template slot="body">
									<view>
										<p style="font-size: 14px; color: #3b4144;">{{item.realName}} </p>
										<p style="color: #999;font-size: 12px;">
											<uni-icons type="phone-filled" color="#e20909" size="12"></uni-icons>
											{{item.phone}}
										</p>
									</view>
								</template>
							</uni-list-item>
						</uni-list>

						<uni-load-more @clickLoadMore="clickLoadMore" :status="loadMore.status" :showIcon="false"
							iconType="auto" :contentText="{contentdown: '点击显示更多',
										contentrefresh: '正在加载...',
										contentnomore: '没有更多数据了'}"></uni-load-more>
					</scroll-view>
					<!-- popup -->
					<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" direction="vertical"
						:popMenu="true" @fabClick="trigger">
					</uni-fab>
					<uni-popup ref="popup" type="center">
						<uni-forms :value="userform" ref="form" class="form" :rules="rules">
							<uni-forms-item label="登陆账户" name="userName">
								<uni-easyinput required type="text" v-model="userform.userName"
									@input="userform.userName=userform.userName.replace(/[^\w\.\/]/ig,'')"
									placeholder="请输入登陆账户" />
							</uni-forms-item>
							<uni-forms-item name="password" label="登陆密码">
								<uni-easyinput required type="text" v-model="userform.password" disabled />
							</uni-forms-item>
							<uni-forms-item label="真实姓名" name="realName">
								<uni-easyinput required type="text" @blur="startCanvans" v-model="userform.realName"
									placeholder="请输入真实姓名" />
							</uni-forms-item>
							<uni-forms-item label="性别" name="gender">
								<uni-data-checkbox v-model="userform.gender" value="1" :localdata="gender"
									@change="function(ars){userform.gender = ars.detail.value }" :multiple="false">
								</uni-data-checkbox>
							</uni-forms-item>
							<uni-forms-item label="出生日期" name="birthday">
								<uni-datetime-picker type="date" v-model="userform.birthday"></uni-datetime-picker>
							</uni-forms-item>
							<uni-forms-item label="电话" name="phone">
								<input type="textarea" v-model="userform.phone" placeholder="请输入电话"
									@input="binddata('age',$event.detail.value)" />
							</uni-forms-item>
							<uni-forms-item label="头像" name="img">
								<canvas style="width: 50px; height: 50px;" canvas-id="firstCanvas" id="firstCanvas"
									class="uni-canvas"></canvas>
								<uni-data-checkbox v-model="canvas.colorSelected" value="1" :localdata="canvas.colors"
									@change="startCanvans()" :multiple="false"></uni-data-checkbox>
							</uni-forms-item>
							<button @click="submitForm">提交</button>
							<button @click="$refs.popup.close()">取消</button>
						</uni-forms>
					</uni-popup>
				</view>
				<view v-show="current === 1">
					<uni-collapse accordion="true">
						<uni-collapse-item class="collapse" v-for="(item,index) in department" :key="index"
							:title="item.departName">
							<uni-collapse accordion="true" @change="changeit(val.departName,index,key)"
								v-for="(val,key) in item.menuChild" :key="key">
								<uni-collapse-item :title="val.departName">
									<!-- 11
										 <view  :title="val.departName">
											 <image :src="user.img" mode=""></image><p>{{user.userName}} <a :href="'tel'+user.phone"></a></p>
										 </view> -->

									<uni-list>
										<uni-list-item v-for="(user,u_key) in val.menuChild " :title="user.userName"
											:thumb="user.img" @click="toDetail('./updateUser',user)">
										</uni-list-item>
									</uni-list>

								</uni-collapse-item>
							</uni-collapse>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDistinctMenu,
		getUserListByDept
	} from '@/api/api_relationship.js'
	import {
		addUser,
		andUserRole,
		getUserInfo,
		getUserList
	} from '../../api/api_userInfo.js'
	import {
		getMenu
	} from '../../api/api_department.js'
	import myHeader from '../components/head.vue'
	export default {
		data() {
			return {
				loadMore: {
					status: 'more'
				},
				userQuery: {
					current: 1, //当前页
					pageSize: 10, //页大小
					param: '', //参数
					total: '', //数据总量
				},
				shipQuery: {
					pageNum: 1, //当前页
					pageSize: 10, //页大小
					userName: '',
					total: '', //数据总量
				},
				userList: [],
				shipList: [{
					titile: '站公共'
				}],
				title: "组织关系",
				current: 0,
				items: ['用户', '组织'],
				userform: {
					userName: '',
					password: '123456',
					realName: '',
					gender: '',
					birthday: '',
					phone: '',
					img: '',
				},
				pattern: {
					color: "#FFF",
					selectedColor: "#007AFF",
					backgroundColor: "#2096f3",
					buttonColor: "#e20909"
				},
				canvas: {
					colors: [{
						"value": 'blue',
						"text": "蓝色",
					}, {
						"value": 'green',
						"text": "绿色",
					}, {
						"value": 'red',
						"text": "红色",
					}, {
						"value": 'yellow',
						"text": "黄色",
					}, {
						"value": 'purple',
						"text": "紫色",
					}, {
						"value": 'black',
						"text": "黑色",
					}, ],
					colorSelected: '',
					img: ''
				},
				rules: {
					// 对name字段进行必填验证
					userName: {
						rules: [{
								required: true,
								errorMessage: '请输入账户',
							},
							{
								minLength: 4,
								maxLength: 8,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					realName: {
						rules: [{
								required: true,
								errorMessage: '请输入真实姓名',
							},
							{
								minLength: 2,
								maxLength: 4,
								errorMessage: '真实姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话',
						}, {
							format: 'number',
							errorMessage: '请输入正确的电话地址',
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					birthday: {
						rules: [{
							required: true,
							errorMessage: '请选择日期',
						}]
					}

				},
				gender: [{
					"value": 0,
					"text": "女"
				}, {
					"value": 1,
					"text": "男"
				}],
				department: [],
			}
		},
		components: {
			myHeader
		},
		mounted() {
			this.clickLoadMore();
			getDistinctMenu().then(res => {
				console.log(res)
				this.department = res
			})
		},
		//上拉加载
		onReachBottom() {
			// this.pageNum ++;
			console.log("onReachBottom")
			uni.stopPullDownRefresh()
			// this.getTableList();
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log("onPullDownRefresh")
			uni.stopPullDownRefresh();
			console.log("onPullDownRefresh")
		},
		methods: {
			changeit(deparName, index, key) { //deparName，index，key
				console.log(this.department)
				getUserListByDept(deparName).then(res => {
					this.department[index].menuChild[key].menuChild = res
				})
			},
			getUser() {},
			gotoUserRoles(item) {
				console.log(item)
				uni.navigateTo({
					url: `./addUserRoles?item=${JSON.stringify(item)}`
				})
			},
			initData() { //初始化data
				this.userQuery = {
						current: 1, //当前页
						pageSize: 10, //页大小
						param: '', //参数
						total: '', //数据总量
					},
					this.shipQuery = {
						pageNum: 1, //当前页
						pageSize: 10, //页大小
						userName: '',
						total: '', //数据总量
					},
					this.userList = [],
					this.shipList = [{
						titile: '站公共'
					}],
					this.current = 0,
					this.items = ['用户', '组织'],
					this.userform = {
						userName: '',
						password: '123456',
						realName: '',
						gender: '',
						birthday: '',
						phone: '',
						img: '',
					}
			},
			onClickItem(ars) {
				this.current = ars.currentIndex
			},
			trigger(ars) {
				this.userform = {
					userName: '',
					password: '123456',
					realName: '',
					gender: '',
					birthday: '',
					phone: '',
					img: '',
				};
				this.$refs.popup.open('top')
			},
			submitForm() {
				let _this = this;
				this.$refs.form.submit().then(res => {
					uni.canvasToTempFilePath({
						fileType: "jpg",
						canvasId: 'firstCanvas',
						success: function(resData) {
							// 在H5平台下，tempFilePath 为 base64
							_this.userform.img = resData.tempFilePath;
							addUser(_this.userform).then(res => {
								_this.$refs.popup.close()
								uni.showToast({
									title: '新增成功',
									duration: 2000,
								});
							})
						}
					})
				})
			},
			startCanvans() {
				let ctx = uni.createCanvasContext("firstCanvas");
				ctx.font = 'normal 20px STXingkai'; // 字体
				ctx.fillStyle = this.canvas.colorSelected;
				ctx.fillRect(0, 0, 50, 50);
				ctx.setFontSize(20) //设置字体大小，默认10
				ctx.setFillStyle('#FFF') //文字颜色：默认黑色
				ctx.fillText(this.userform.realName.substr(0, 1), 15, 30); //文字内容、x坐标，y坐标
				ctx.draw();
			},
			showPickerColorPop(type) {
				this.showPickerColor = true;
				this.type = type;
			},
			refesh() {
				this.shipList.push({
					titile: '站公共'
				})
			},
			clickLoadMore() { //用户点击更多
				this.loadMore.status = 'loading'
				let _this = this;
				getUserList(
					this.userQuery
				).then(res => {
					_this.loadMore.status = 'more'
					if (res.total < _this.userQuery.pageSize) {
						_this.loadMore.status = 'noMore'
					}
					_this.userQuery.current++;
					_this.userList = _this.userList.concat(res.records)
					_this.userQuery.pageSize = res.size
					_this.userQuery.total = res.total
				})
			},
			toDetail(url,data){
				console.log('+++++++')
				uni.navigateTo({
					url: url + "?user=" + JSON.stringify(data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin left-icons-red {
		width: 10upx;
		height: 100%;
		background-color: #e20909;
		content: '';
		margin: 10upx;
	}

	.content {
		background-color: #f7f7f7;

		// width: 90%;
		// margin: 0 auto ;
		/deep/ .uni-list {
			width: 90%;
			margin: 5px auto;
			background-color: #f7f7f7;

			.uni-list-item {
				border-radius: 10px;
				margin: 2px 0;
			}
		}

		.collapse {
			>/deep/ .uni-collapse-cell__title {
				&::before {
					@include left-icons-red;
				}
			}

			>/deep/ .uni-collapse-cell__content {
				.uni-collapse-cell__title-text {
					span {
						&::before {
							content: '\00A0\00A0\00A0\00A0';
							height: 100%
						}
					}
				}
			}
		}

		/deep/ .uni-easyinput__content {
			width: 80%;
			margin: 5% auto 0 auto;
		}

		/deep/ .segmented-control {
			width: 90%;
			margin: 0 auto;
			margin-top: 2%;
			border: none !important;

			.segmented-control__item {
				border-color: #e20909 !important;
				font-size: 14px !important;
				background-color: #fff !important;

				span {
					color: #e20909 !important;
				}
			}

			.segmented-control__item--button--active {
				background: #2096f3 linear-gradient(180deg, #ff5e59, #e20909);
				border: none !important;

				span {
					color: #fff !important;
				}
			}

			.segmented-control__item--button--first {}
		}

		/deep/ .uni-transition {
			display: flex;

			.form {
				background-color: #FFFFFF;
				padding: 50upx;

				.label-text {
					// margin-top: 25%;
				}
			}
		}

		/deep/ #firstCanvas {
			float: left;
		}

		/deep/ .uni-data-checklist {
			width: 65%;
			float: right;

			.checklist-box {
				margin-right: 15px;
			}
		}
	}
</style>
